<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link type="text/css" rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>demo · canvas生成图片</title>

    <!-- 桌面端浏览器及收藏夹图标 -->
    <link rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
</head>

<body>
    <div class="dcdev-body-container" id="dcdev_body_container">
        <!-- body start -->
        <img id="image">
        <!-- body end -->
    </div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- oauth_mode start -->
<!-- 不授权模式，仅初始化常用变量及函数 -->
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass" authorize_mode="normal"
    console_mode="">
</script>
<!-- oauth_mode end -->

<!-- 基础样式库及基于layui的ui类 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
    xhr_show_loading=1></script>
<!-- <script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/import_develop_kit.js"></script> -->

<script src="./image_class.js"></script>
<script>
    $("#image").css("width", browser_info.width).css("height", 600);
    var data = {
        // image标签的id
        id: "image",
        // 保存格式（格式支持png/jpg,默认png）
        format: "jpg",
        // 压缩比（默认0.8）
        quality: 0.6,
        // 渲染数据
        draw_config: [{
                // 类型
                type: "block",
                // 字体颜色
                color: "#effeee",
                // 显示位置及大小
                position: {
                    x: 0,
                    y: 0,
                    w: 800,
                    h: 800,
                }
            },
            {
                // 类型(text为字符型、block为色块)
                type: "text",
                text: "这是一段demo内容",
                // 字体大小
                size: 20,
                // 字体颜色
                color: "blue",
                // 显示位置
                position: {
                    x: 5,
                    y: 65
                }
            },
            {
                // 类型(text为字符型、block为色块)
                type: "line",
                // 线颜色
                strokeStyle: "red",
                // 填充颜色（null则不填充）
                fillStyle: "#229900",
                lineJoin: "round",
                // 线宽
                lineWidth: 5,
                // 显示位置
                position: [{
                    x: 0,
                    y: 200
                }, {
                    x: 200,
                    y: 200
                }, {
                    x: 250,
                    y: 250
                }, {
                    x: 280,
                    y: 20
                }, {
                    x: 0,
                    y: 200
                }, ]
            },
            {
                type: "rect",
                // 显示位置及大小
                fillRect: {
                    x: 0,
                    y: 100,
                    w: 200,
                    h: 200,
                },
                fillStyle: "blue",
                strokeRect: {
                    x: 50,
                    y: 250,
                    w: 100,
                    h: 100,
                },
                // 线宽
                lineWidth: 20,
                strokeStyle: "yellow",
            },
            {
                // 类型(text为字符型、block为色块)
                type: "line",
                // 线颜色
                strokeStyle: "blue",
                // 填充颜色（null则不填充）
                fillStyle: "#229900",
                // 线宽
                lineWidth: 1,
                // 显示位置
                position: [{
                    x: 0,
                    y: 300
                }, {
                    x: 300,
                    y: 300
                }, ]
            },
            {
                // 类型(text为字符型、block为色块)
                type: "text",
                text: "这是一段demo内容",
                // 字体大小
                size: 20,
                // 字体颜色
                color: "gray",
                // 显示位置
                position: {
                    x: 6,
                    y: 66,
                }
            }, {
                // 类型
                type: "block",
                // 字体颜色
                color: "#eeeeee",
                // 显示位置及大小
                position: {
                    x: 0,
                    y: 0,
                    w: 200,
                    h: 50,
                }
            },
            {
                // 类型
                type: "img",
                src: "https://res.dcdev.net/dcdev/v1.0.6/assets/images/close.png",
                // 显示位置及大小
                position: {
                    x: 5,
                    y: 5,
                    w: 180,
                    h: 40,
                }
            },
            {
                // 类型
                type: "img",
                src: "https://res.dcdev.net/dcdev/v1.0.6/assets/images/close.png",
                // 显示位置及大小
                position: {
                    x: 5,
                    y: 100,
                    w: 180,
                    h: 40,
                }
            },
            {
                // 类型
                type: "img",
                src: "https://res.dcdev.net/dcdev/v1.0.6/assets/images/close.png",
                // 显示位置及大小
                position: {
                    x: 100,
                    y: 100,
                    w: 180,
                    h: 40,
                }
            },
            {
                // 类型
                type: "qrcode",
                url: "https://www.baidu.com/",
                // 显示位置及大小
                position: {
                    x: 0,
                    y: 0,
                    w: 50,
                    h: 50,
                }
            },
            {
                // 类型
                type: "qrcode",
                url: "https://www.sina.com/",
                // 显示位置及大小
                position: {
                    x: 200,
                    y: 100,
                    w: 50,
                    h: 50,
                }
            },
            {
                // 类型
                type: "qrcode",
                url: "https://www.sina.com/",
                // 显示位置及大小
                position: {
                    x: 200,
                    y: 300,
                    w: 50,
                    h: 50,
                }
            },
        ]
    }
    draw_canvas.draw(data);
</script>

</html>